<script setup>

</script>

<template>
  <div class="item1">
    <h4>
      <slot name="title"></slot>
    </h4>
    <slot name="img" style="display: inline;"></slot>
    <strong>
      <slot name="content"></slot>
    </strong>
  </div>
</template>

<style scoped lang="scss">
.item1 {
  position: relative;
  width: 85%;
  height: 100px;
  margin: 2px 8px 10px 8px;
  text-align: left;
  color: #bbb;
  background-color: #f6f6f6;
  border-radius: 5px;
  padding: 6px 16px;

  h4 {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.1;
    color: #64854c;
  }

  strong {
    position: absolute;
    top: 38%;
    left: 20%;
    color: #666;
    font-size: 15px;
    width: 80%;
  }
}

@media screen and (max-width: 48rem) {
  .item1 {
    margin: 2px 8rem 10px 1rem;
    padding: 6px 1rem 0 -0.5rem;
  }
}
</style>
